<template>
    <view class="flex-col homepage">
        <view class="flex-row wrapper" v-for="car in carList" @click="vehicleDetails(car.vehicleNumber)">
            <view class="wraper-col"></view>
            <view class="flex-col flex-row wraper-col-two">
                <view class="u-line-1 text">{{car.vehicleNumber}}</view>
                <u-tag class="tag" :text="car.vehicleState" size="mini"></u-tag>
            </view>
            <view class="u-line-1 text-two">{{car.vehicleBrand}}{{car.vehicleModel}}{{car.vehicleColor}}</view>
        </view>
        <u-button class="button" type="success" size="medium" @click="tjcl()">
            + 添加车辆
        </u-button>
    </view>
</template>
<script>
  import request from '../../../request.js'
    export default {
        data() {
            return {
              carList:[],
              userId:localStorage.getItem("userId")
            }
        },
        onLoad() {
          console.log(this.userId)
          this.getMyCar()
        },
        methods: {
          //车辆详情
          vehicleDetails(carNumber){
            localStorage.setItem("vehicleNumber",carNumber);
            uni.navigateTo({
              url:'./Thevehicledetails'
            })
            
          },
          //添加车辆
          tjcl(){
            uni.navigateTo({
              url:'./AddVehicle'
            })
          },
          getMyCar(){
            request({
            	url: `/carshop/vehicle-car/getMyCar/${this.userId}`,
            	method: 'POST',
            	success: (res) => {
            		console.log(res.data.data.myCar)
            		this.carList=res.data.data.myCar
            	}
            })
          },
          
        }
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        height: 1334rpx;
        padding: 56rpx 0rpx 0rpx 55rpx;

        .wrapper {
            width: 640rpx;
            margin: 0rpx 0rpx 50rpx 4rpx;
            padding: 30rpx 0rpx 28rpx 23rpx;
            border-width: 2rpx;
            border-style: solid;
            border-color: rgba(226, 226, 226, 1);

            .wraper-col {
                width: 58rpx;
                height: 64rpx;
                margin: 10rpx 28rpx 0rpx 0rpx;
                border-radius: 100rpx;
                background: rgba(136, 136, 136, 1);
            }

            .wraper-col-two {
                width: 156rpx;
                margin-right: 192rpx;

                .text {
                    width: 100%;
                    margin-bottom: 18rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(85, 85, 85, 1);
                }

                .tag {
                    height: 38rpx;
                    margin-left: 10rpx;
                    font-size: 24rpx;
                    background: rgba(151, 227, 144, 1);
                    font-weight: 600;
                    color: rgba(9, 48, 23, 1);
                }
            }

            .text-two {
                width: 156rpx;
                font-size: 26rpx;
                font-weight: 600;
                color: rgba(144, 144, 144, 1);
            }
        }

        .button {
			margin-right: 50px;
            width: 640rpx;
            height: 80rpx;
            font-size: 30rpx;
            background: rgba(50, 147, 238, 1);
            font-weight: 600;
        }
    }
</style>